<template>
  <el-input
    placeholder="合同ID"
    class="search"
    suffix-icon="el-icon-search"
  ></el-input>
  <el-input
    placeholder="手机号"
    class="search"
    suffix-icon="el-icon-search"
  ></el-input>
  <el-input
    placeholder="日期"
    class="search"
    suffix-icon="el-icon-search"
  ></el-input>
  <el-button type="primary">查询</el-button>
  <el-button>重置</el-button>
  <el-table
    :data="contract.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
    height="600"
    style="width: 100%"
  >
    <!-- <el-table-column type="selection"></el-table-column> -->
    <el-table-column
      prop="contractNumber"
      label="ID"
      width="150"
    ></el-table-column>
    <el-table-column prop="user.realName" label="签订人"></el-table-column>
    <el-table-column prop="enterId" label="法人"></el-table-column>
    <el-table-column
      width="170"
      prop="user.idCard"
      label="身份证号码"
    ></el-table-column>
    <el-table-column
      width="100"
      prop="enterId"
      label="签订企业"
    ></el-table-column>
    <el-table-column
      prop="user.phone"
      label="手机号"
      width="120"
    ></el-table-column>
    <el-table-column label="生日" width="150">
      <template #default="scope">
        <div>
          {{ (scope.row.user.idCard + '').substr(6, 4) }}年{{
            (scope.row.user.idCard + '').substr(10, 2)
          }}月{{ (scope.row.user.idCard + '').substr(12, 2) }}日
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="user.sex" label="性别"></el-table-column>
    <el-table-column label="头像">
      <template #default="scope">
        <el-image :src="scope.row.user.avatar"></el-image>
      </template>
    </el-table-column>
    <el-table-column
      prop="startTime"
      label="入驻时间"
      width="150"
    ></el-table-column>
    <el-table-column label="是否认证">
      <template #default="scope">
        <div v-if="scope.row.user.isDelete == 0" style="color: green;">
          已认证
        </div>
        <div v-else style="color: red;">未认证</div>
      </template>
    </el-table-column>
    <el-table-column fixed="right" align="center" label="操作" min-width="140">
      <template #default="scope">
        <el-button
          size="small"
          icon="el-icon-view"
          type="info"
          @click="check(scope.row)"
        ></el-button>
        &emsp;
        <!-- <el-span
          @click="edit(scope.row)"
          style="font-size: 12px; color: #2561ef"
        >
          编辑
        </el-span> -->
        <!-- &emsp; -->
        <el-button
          size="small"
          v-if="scope.row.isDelete == 0"
          icon="el-icon-delete"
          type="danger"
          @click="deleterow(scope.row)"
        ></el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[5, 10, 15, 20, 30]"
    :size="default"
    :disabled="disabled"
    :background="background"
    layout="total, prev, pager, next,sizes"
    :total="contract.length"
  />
  <!-- @size-change="handleSizeChange"
    @current-change="handleCurrentChange" -->
</template>
<script setup>
import { selectContract, deleteContract } from '@/api/contract'
import { onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'
// var activeName = ref('个人')
// const radiobtn = ref(0)
var pageSize = ref(5)
var currentPage = ref(1)
var router = useRouter()
const options = reactive(['待签订', '已签订', '已终止'])
var contract = ref([])
var value = ref()
var user_id = ref()
var rowData = reactive()
var result = ref(false)
onMounted(async () => {
  contract.value = (await selectContract(value.value, user_id.value)).data
  // console.log("login");
  console.log(contract.value)
})
function check(row) {
  rowData = JSON.stringify(row)
  router.push({ path: '/Tenant/CheckTenant', query: { rowData } })
}
async function deleterow(row) {
  ElMessageBox.confirm(
    '确定删除租户' + row.user.userId + '的信息吗？',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    result.value = (await deleteContract(row.contractId)).data
    // console.log(result.value);
    if (result.value) {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      location.reload()
    } else {
      ElMessage({
        type: 'error',
        message: '删除失败',
        duration: 500,
        onClose: () => {
          location.reload()
        },
      })
    }
  })
}
</script>
<style>
.search {
  width: 15%;
  margin-bottom: 20px;
  margin-right: 20px;
}
.el-table__body tr:hover > td {
  background-color: #d7eff6 !important;
  /* color: #f19944; */ /* 设置文字颜色，可以选择不设置 */
}
</style>
